<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    img {
      width: 200px;
    }
    .keyword {
      margin: 20px 0;
    }
    .operate,
    .box {
      margin: 100px;
    }
    .place_hoder::-webkit-input-placeholder {
      color: #0f0;
      font-size: 18px;
    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }
    h1 {
      color: red;
      user-select: none;
    }
    /* body {
      filter: grayscale(1);
    } */
    .triangle {
      width: 0;
      border-width: 20px 15px;
      border-style: solid;
      border-color: #000 transparent transparent;
    }
    .box {
      width: 350px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 100px auto;
    }
    .gradient {
      border: solid 5px transparent;
      border-radius: 10px;
      background-image: linear-gradient(white, white),
        linear-gradient(320deg, #828282, #fdfdfd 50%, #fcb082);
      background-origin: border-box;
      background-clip: content-box, border-box;
    }
    p::first-letter {
      display: block;
      float: left;
      color: skyblue;
      font-size: 30px;
    }
    .operate {
      margin: 100px;
      display: inline-block;
      position: relative;
    }
    .btn::before {
      content: "";
      position: absolute;
      top: -10px;
      right: -10px;
      bottom: -10px;
      left: -10px;
      cursor: pointer;
    }
    img.new {
        filter: blur(4px);
    }
  </style>
  <body>
    <h1>这是一行红色的字体</h1>
    <div class="keyword">
      <input type="text" class="place_hoder" placeholder="请输入关键字" />
    </div>
    <input type="number" name="" id="" />
    <p>段落文字首字下沉</p>
    <div class="operate">
      <button class="btn">添加</button>
    </div>
    <div class="triangle"></div>
    <div>
      <span>234827348783</span>
      <span>234827348783</span>
      <span>234827348783</span>
      <span>234827348783</span>
      <span>234827348783</span>
      <span>234827348783</span>
      <span>234827348783</span>
    </div>
    <div class="box gradient">炫酷渐变边框</div>
    <div>
      <img
        src="https://img1.baidu.com/it/u=2984654008,2264339927&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500"
        alt=""
      />
      <img
        class="new"
        src="https://img1.baidu.com/it/u=2984654008,2264339927&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500"
        alt=""
      />
    </div>
  </body>
</html>
